<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>门店收款码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/store/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/store/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/store/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/store/css/wallet.css" />
		<style type="text/css">
			.payment_erweima canvas{width: 180px; height: 180px;}
			@media only screen and (min-width: 321px){.payment_conbox{margin-top: 0px;}.payment_erweima canvas,.payment_erweima{width: 210px; height: 210px;}}
			@media only screen and (min-width: 381px){.payment_conbox{margin-top: 0px;}.payment_erweima canvas,.payment_erweima{width: 240px; height: 240px;}/*.payment_conbox .tip{font-size: 18px; line-height: 30px;}*/}
			@media only screen and (width: 384px){.payment_erweima canvas,.payment_erweima{width: 220px; height: 220px;}}
			@media only screen and (min-width: 600px){.payment_conbox{margin-top: 0px;}.payment_erweima canvas,.payment_erweima{width: 340px; height: 340px;}/*.payment_conbox .tip{font-size: 25px; line-height: 30px;}*/.payment_btnbox{height: 70px; line-height: 70px; font-size: 27px;}}
			@media only screen and (min-width: 900px){.payment_conbox{margin-top: 0px;}}
			.mui-bar-nav{background: #D6AA50; box-shadow: none;}	
			.mui-bar-nav a, .mui-bar-nav h1{color: white;}
			.mui-bar-nav~.mui-content{padding-top: 84px; background: #D6AA50;}	
			.payment_conbox{background: none; width: 100%;}
		</style>
		<!--[if lt IE 9]> 
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]--> 
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">收款码</h1>
		</header>
		<div class="mui-content payment_content">
			<div class="payment_conbox">
				<div id='payment_conbox'>
					<div class="erweimabox">
						<p class="erweim_bt">扫一扫付款</p>
						<div class="payment_erweima"  >
							<div id="qrcode" ></div>
						</div>
						<ul class="erweima_bottom clearfix">
							<li>
								<p class="erwm_fkimg"><img src="__INDEX__/store/images/zhifubao.jpg"></p>
								<p>支付宝</p>
							</li>
							<li>
								<p class="erwm_fkimg"><img src="__INDEX__/store/images/weixin.jpg"></p>
								<p>微信支付</p>
							</li>
						</ul>
					</div>
					<div class="payment_info">
						<div class="left"><img src="__INDEX__/store/images/logo-ma.png"></div>
						<div class="right">
							<p>由{$Think.config.company_name}提供技术支持</p>
							<p>客服热线：{$Think.config.service_phone}</p>
						</div>
					</div>
				</div>
				<div id ='cut_img'></div>
			</div>
		</div>
	</body>
</html>
{include file="public/footer" /}
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	var index = layer.load(0, {shade: false,time: 1.5 * 1000});
	$(".layui-layer-loading").css("left", "50%");
	var url = "{$code_url}";
	 $("#qrcode").qrcode({
        render : "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "180",    	//二维码的宽度
        height 		: "180",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
    });
	 setTimeout(function(){
	html2canvas($("#payment_conbox"), {
		 onrendered: function (canvas) {
		     var url = canvas.toDataURL(); //base64数据
		     var image = new Image();
		     image.src = url;
		     image.id = 'div_img';
		     $('#cut_img').append(image);
		     $('#payment_conbox').hide();
		   }
		});
},1000);
   
</script>
